|
1
|
|
|
import * as mdc from 'material-components-web'; |
|
2
|
|
|
import React from 'react'; |
|
3
|
|
|
import ReactDOM from 'react-dom'; |
|
4
|
|
|
import Model from './TopBar/Model'; |
|
5
|
|
|
|
|
6
|
|
|
export interface Adapter { |
|
7
|
|
|
onGithubClick(): void, |
|
8
|
|
|
onMenuClick(): void |
|
9
|
|
|
} |
|
10
|
|
|
|
|
11
|
|
|
export interface Properties { |
|
12
|
|
|
model: Model |
|
13
|
|
|
adapter: Adapter |
|
14
|
|
|
} |
|
15
|
|
|
|
|
16
|
|
|
interface State { |
|
17
|
|
|
} |
|
18
|
|
|
|
|
19
|
|
|
export default class TopBar extends React.Component<Properties, State> { |
|
20
|
|
|
topAppBar: mdc.topAppBar.MDCTopAppBar | undefined; |
|
21
|
|
|
|
|
22
|
|
|
constructor(props: Properties) { |
|
23
|
1 |
|
super(props); |
|
24
|
|
|
} |
|
25
|
|
|
|
|
26
|
|
|
componentDidMount(): void { |
|
27
|
|
|
// @ts-ignore |
|
28
|
1 |
|
this.topAppBar = new mdc.topAppBar.MDCTopAppBar(ReactDOM.findDOMNode(this)); |
|
29
|
|
|
// @ts-ignore |
|
30
|
1 |
|
this.topAppBar.listen('MDCTopAppBar:nav', this.props.adapter.onMenuClick); |
|
31
|
|
|
} |
|
32
|
|
|
|
|
33
|
|
|
render(): React.ReactElement { |
|
34
|
1 |
|
const model: Model = this.props.model; |
|
35
|
1 |
|
return <header className="mdc-top-app-bar mdc-top-app-bar--fixed"> |
|
36
|
|
|
<div className="mdc-top-app-bar__row"> |
|
37
|
|
|
<section className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> |
|
38
|
|
|
<button className="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button> |
|
39
|
|
|
<span className="mdc-top-app-bar__title">{model.title}</span> |
|
40
|
|
|
</section> |
|
41
|
|
|
<section className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> |
|
42
|
|
|
<button |
|
43
|
|
|
className="mdc-top-app-bar__action-item mdc-icon-button mdc-icon-button" |
|
44
|
|
|
onClick={this.props.adapter.onGithubClick} |
|
45
|
|
|
title={model.sourceButtonLabel} |
|
46
|
|
|
{...{'data-testid': 'github-button'}} |
|
47
|
|
|
> |
|
48
|
|
|
<svg |
|
49
|
|
|
viewBox="0 0 16 16" |
|
50
|
|
|
version="1.1" |
|
51
|
|
|
aria-hidden="true" |
|
52
|
|
|
className="mdc-icon-button__icon" |
|
53
|
|
|
> |
|
54
|
|
|
<path |
|
55
|
|
|
fillRule="evenodd" |
|
56
|
|
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" |
|
57
|
|
|
/> |
|
58
|
|
|
</svg> |
|
59
|
|
|
</button> |
|
60
|
|
|
</section> |
|
61
|
|
|
</div> |
|
62
|
|
|
</header>; |
|
63
|
|
|
} |
|
64
|
|
|
} |
|
65
|
|
|
|
enbock /
Time-Tracker
